<template>
<div ref="box" class="box"></div>

</template>
<script>
import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"


export default {
  mounted() {
    const size = 50
    const divisions = 10

  //获取元素
    const box = this.$refs.box
  //创建场景，相机，渲染器
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(box.clientWidth, box.clientHeight)
    box.appendChild(renderer.domElement)

    //添加相机辅助对象
    const camerahelper = new THREE.CameraHelper(camera);
    scene.add(camerahelper)

    //arrowhelper
    const dir = new THREE.Vector3(1, 0, 0)
    const origin = new THREE.Vector3(0, 0, 0)
    const length = 1000
    const color = 0xff0000
    const headLength = 0.2 * length
    const headWidth = 0.1 * headLength
  const arrowHelper = new THREE.ArrowHelper(dir,origin,length,color,headLength,headWidth)
    scene.add(arrowHelper)

    //加入AxesHelper 辅助坐标轴  参数是坐标轴的长度
    const axesHelper = new THREE.AxesHelper(50)
    scene.add(axesHelper)

   
    //设置相机位置
    camera.position.set(0, 0, 5)
    camera.lookAt(0, 0, 0)

    //创建控制器并绑定到相机上
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping=true

     //创建立方体模型
    const geometry = new THREE.BoxGeometry()
    const texture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/crate.gif')

     const material = new THREE.MeshBasicMaterial({

       map: texture,
      side:THREE.DoubleSide//设置双面材质
     })
    
    const cube = new THREE.Mesh(geometry, material)
    cube.scale.set(20,20,20)
    scene.add(cube)

    //加入盒子辅助框
    const boxHelper = new THREE.BoxHelper(cube, 0xffff00);
    scene.add(boxHelper)

   //添加环境光
    const light = new THREE.AmbientLight(0xffff00, 1)
    scene.add(light)
    //添加点光源
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
    directionalLight.position.set(100, 100, 100)
    scene.add(directionalLight)

    //添加网格坐标
    const gridHelper = new THREE.GridHelper(size, divisions)
    scene.add(gridHelper)

    //极坐标辅助对象
    const pHelper = new THREE.PolarGridHelper(10, 16, 8, 64)
    scene.add(pHelper)

    //创建一个寻的球形网格Mesh的辅助对象来模拟 半球形光源  好像没什么用
    const hemisphereLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
    scene.add(hemisphereLight)
    
    //渲染
    function animate(params) {
      requestAnimationFrame(animate)
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      renderer.render(scene, camera)
      controls.update()
    }
    animate()
}
}
</script>
<style lang="less">
.box{
  width: 100vw;
  height: 100vh;


}
</style>
